<template>
  <!-- 定义echarts需要控制的dom元素 -->
  <div :style="{height:height,width:width}"/>
</template>
<script>
import * as echarts from 'echarts';
import China from "/src/config/China.js";
require('echarts/theme/macarons') // echarts主题

export default {
  name: 'App',
  data() {
    return {
      height: '700px',
      width: '610px',

      /*echarts数据*/
      chartData: {}
    }
  },
  mounted() {
    // dom元素加载完成后执行
    this.$nextTick(() => {
      // 初始化echarts实例
      this.initEcharts()
    })
  },
  methods: {
    initEcharts() {
      // 定义一个图表数据
      /*      this.chartData = {
              expectedData: [190, 100, 10, 9, 170, 110, 160],
              actualData: [120, 200, 150, 80, 70, 110, 130]
            }*/
      //参数一:this.$el指向当前组件template模板中的根标签(在mounted生命周期中才有效)
      //参数二:echarts主题颜色
      this.chart = echarts.init(this.$el,"macarons")
      this.setOptions(this.chartData)

    },
    setOptions({expectedData, actualData}) {
      //参数一:map名称
      //参数二:地图数据json
      echarts.registerMap('China', China);
      var option = {
        //更多属性查看https://echarts.apache.org/zh/option.html#legend
        tooltip: {
          trigger: 'item',
          //把数据显示在提示框中
          formatter: function (params) { //提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
            //选中那个区域的数据
            var res = params.name + '<br/>';
            //获取series数据
            var myseries = option.series;
            for (var i = 0; i < myseries.length; i++) {
              //遍历series数据的data数据里面存放的就是各个区域的信息
              for (var j = 0; j < myseries[i].data.length; j++) {
                if (myseries[i].data[j].name == params.name) {
                  //如果区域名称相同，就把数据显示在提示框中
                  res += myseries[i].name + ' : ' + myseries[i].data[j].value + '</br>';
                }
              }
            }
            return res;
          },
          textStyle: {
            color: "white" //设置文字颜色
          },
        },
        visualMap: {
          min: 0,//最小值
          max: 20,//最大值
          text: ['High', 'Low'],
          left: 'right',
          realtime: false,//拖拽时，如果为true则拖拽手柄过程中实时更新图表视图。是否实时更新。如果为false则拖拽结束时，才更新视图。
          calculable: true,//是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
          show: false,//是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在。
          inRange: {//定义 在选中范围中 的视觉元素。（用户可以和 visualMap 组件交互，用鼠标或触摸选择范围）
            color: ['#D1EEEE', '#33ccff', '#66ccff', '#99ffff', '#ccffff', "#ffffff", "#947aad"]
          },
        },
        legend: {//图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
          show: false,//
          /*formatter: function (name) {
            return 'Legend' + name;
          }*/
        },
        series: [{
          name: '答卷数量',
          type: 'map',
          mapType: 'China',//地图名称
          aspectScale: 0.9, //地图长度比
          roam: 'scale',//如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          zoom: 1.2,//地图缩放比例当前视角的缩放比例。
          label: {
            fontStyle: 'italic',//'normal','italic','oblique'
            fontSize: 100,//文字的字体大小。
            align: 'center',
            normal: {
              show: true,
              textStyle: {
                color: '#000000'//地图文字颜色
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                color: '#0000ff'//选中地图文字颜色
              },
              focus: 'none'//self:只聚焦（不淡出）当前高亮的数据的图形,'none' 不淡出其它图形，默认使用该配置
            }
          },
          itemStyle: {//地图区域的多边形 图形样式
            borderWidth: 1,//描边线宽。为 0 时无描边
            borderType: 'dashed',//描边类型:'solid','dashed','dotted'
            borderColor: '#000',//图形的描边颜色。支持的颜色格式同 color
            shadowColor: 'rgba(0, 0, 0, 0.2)',//图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
            shadowBlur: 6,//阴影模糊
          },
          showLegendSymbol: true,//存在legend时区域会出现小圆点
          data: [//存放地图数据
            {
              name: '北京市',
              value: 0,
              selected: false,//该区域是否选中。
              labelLine: {
                show: true,
                showAbove: true,
              }
            },
            {
              name: '天津市',
              value: 0
            },
            {
              name: '河北省',
              value: 0
            },
            {
              name: '山西省',
              value: 0
            },
            {
              name: '内蒙古自治区',
              value: 0
            },
            {
              name: '辽宁省',
              value: 19
            },
            {
              name: '吉林省',
              value: 0
            },
            {
              name: '黑龙江省',
              value: 0
            },
            {
              name: '上海市',
              value: 0
            },
            {
              name: '江苏省',
              value: 0
            },
            {
              name: '浙江省',
              value: 0
            },
            {
              name: '安徽省',
              value: 0
            },
            {
              name: '福建省',
              value: 4
            },
            {
              name: '江西省',
              value: 0
            },
            {
              name: '山东省',
              value: 0
            },
            {
              name: '河南省',
              value: 0
            },            {
              name: '湖北省',
              value: 0
            },
            {
              name: '湖南省',
              value: 0
            },
            {
              name: '广东省',
              value: 7
            },
            {
              name: '广西壮族自治区',
              value: 0
            },
            {
              name: '海南省',
              value: 0
            },
            {
              name: '重庆市',
              value: 0
            },
            {
              name: '四川省',
              value: 0
            },
            {
              name: '贵州省',
              value: 0
            },
            {
              name: '云南省',
              value: 0
            },
            {
              name: '西藏自治区',
              value: 0
            },
            {
              name: '陕西省',
              value: 0
            },
            {
              name: '甘肃省',
              value: 0
            },
            {
              name: '青海省',
              value: 0
            },
            {
              name: '宁夏回族自治区',
              value: 0
            },
            {
              name: '新疆维吾尔自治区',
              value: 0
            },
            {
              name: '台湾省',
              value: 0
            },
            {
              name: '香港特别行政区',
              value: 0
            },
            {
              name: '澳门特别行政区',
              value: 0
            },


          ],

        }
        ]
      };

      this.chart.setOption(option);
    }
  }
}
</script>

